<template>
  <div :style="maxHeightStyle">
    <!-- <table border="0" cellspacing="0" cellpadding="0"> -->
      <div>
        <table>
          <tr>
            <th v-show="checkbox" class="first-column" width="10">
              <input type="checkbox" ref="checkAll" @click="checkAllClick()">
            </th>
            <th v-for="(item, index) in tableInfo.title" v-html="item.label" :key="index" :width="item.width"></th>
            <th v-if="!notOption" class="last-column" v-html="optionTitle"  :width="optionWidth"></th>
          </tr>
        </table>
      </div>
      <!-- <div v-if="tableInfo.value.length > 0" style="height: calc(100% - 100px);overflow: auto;width: 100%;"> -->
      <div v-if="tableInfo.value.length > 0" :style="maxHeightStyle">
        <table>
          <tr v-for="(item, index) in tableInfo.value" :key="index">
            <td v-show="checkbox" class="first-column" width="10">
              <input type="checkbox" ref="checked" @click="checkOneClick(index)">
            </td>
            <td v-for="(vItem, vIndex) in tableInfo.title" :key="vIndex" v-html="item[vItem.value]" :width="vItem.width"></td>
            <td v-if="!notOption" class="last-column" :width="optionWidth" @click.capture="returnIndex(index)">
              <slot></slot>
            </td>
          </tr>
        </table>
      </div>
    <!-- </table> -->
    <div v-if="tableInfo.value.length === 0" class="isEmpty">
      <hu-empty />
    </div>
  </div>
</template>
<script>
import HuEmpty from '../HuEmpty'
export default {
  props: {
    value: {
      type: Array,
      default: () => []
    },
    checkbox: {
      type: Boolean,
      default: () => false
    },
    optionTitle: {
      type: String,
      default: () => "操作"
    },
    notOption: {
      type: Boolean,
      default: () => false
    },
    tableInfo: {
      title: [],
      value: []
    },
    optionWidth: {
      type: String,
      default: () => "150"
    },
    heightReduce:{
      type: String,
      default: () => "60px"
    }
  },
  comments: {
    HuEmpty
  },
  data() {
    return {
      maxHeightStyle: `height: calc(100% - ${this.heightReduce});overflow: auto;`,
      isAllChecked: true,
      selectedArr: [],
      checkOneArr: []
    }
  },
  watch:{
    heightReduce(newV,oldV) {
      this.maxHeightStyle=`height: calc(100% - ${newV} - 50px);overflow: auto;`
    }
  },
  mounted() {
      // this.checkOneArr = new Array(this.tableInfo.value.length).fill(true)
  },
  methods: {
    checkAllClick() {
      if (this.isAllChecked) {
        for (let i = 0; i < this.tableInfo.value.length; i++) {
          this.$refs.checked[i].checked = true;
          this.$set(this.selectedArr, i, i)
        }
        this.checkOneArr = new Array(this.tableInfo.value.length).fill(false)
      } else {
        for (let i = 0; i < this.tableInfo.value.length; i++) {
          this.$refs.checked[i].checked = false;
          this.selectedArr.splice(0, 1)
        }
        this.checkOneArr = new Array(this.tableInfo.value.length).fill(true)
      }
      this.isAllChecked = !this.isAllChecked
      this.emit()
    },
    checkOneClick(index) {
      // 当没有选择复选框时，清除 this.checkOneArr[0]
      let count = 1
      for (let i = 0; i < this.tableInfo.value.length; i++) {
        if (this.checkOneArr[i] === true && count === this.tableInfo.value.length) {
          this.selectedArr.splice(0, 1)
          break
        } else if (this.checkOneArr[i] === true) {
          count++
        }
      }

      if (this.checkOneArr[index] || this.checkOneArr[index] == undefined) {
        this.$set(this.selectedArr, index, index)
        this.checkOneArr[index] = false
      } else {
        this.$set(this.selectedArr, index, null)
        this.checkOneArr[index] = true
      }
      this.emit()
    },
    returnIndex(index) {
      // 初始化相关数据
      this.$refs.checkAll.checked = false;
      for (let i = 0; i < this.tableInfo.value.length; i++) {
        this.checkOneArr[i] = true
        this.$refs.checked[i].checked = false;
        this.$set(this.selectedArr, i, null)
      }

      if (!this.isAllChecked) {
        this.isAllChecked = !this.isAllChecked
      }
      this.$set(this.selectedArr, 0, index)
      this.emit()
    },

    emit() {
      let arr = []
      // 过滤 this.selectedArr 中的 null
      for (let i = 0; i < this.tableInfo.value.length; i++) {
        if (i < this.selectedArr.length
          && this.selectedArr[i] !== null
          && this.selectedArr[i] != undefined
        ) {
          arr.push(this.selectedArr[i])
        }
      }
      this.$emit("input", arr)
    },

    resetChecked() {
      for (let i = 0; i < this.tableInfo.value.length; i++) {
        this.$refs.checked[i].checked = false;
      }
      this.checkOneArr = new Array(this.tableInfo.value.length).fill(true)
      this.$refs.checkAll.checked = false;
      this.isAllChecked = true;
    }
  }
}
</script>

<style scoped>
.table-box {
  /* position: relative; */
  /* width: 100%; */
  height: calc(100% - 60px); 
}

table {
  width: 100%;
  border: 1px solid #2b313e;
  border-collapse: collapse;
  border-spacing: 0px;
}

tr th {
  user-select: none;
  height: 35px;
  padding: 0 10px;
  font-size: 13px;
  letter-spacing: 1.2px;
  text-align: left;
  border: 1px solid #2b313e;
  color: rgba(255, 255, 255, 0.5);
  background-color: #1c222d;
}

tr td {
  cursor: default;
  height: 30px;
  line-height: 20px;
  padding: 0 10px;
  font-size: 13px;
  letter-spacing: 1.2px;
  border: 1px solid #2b313e;
  color: rgba(255, 255, 255, 0.5);
  white-space: normal;
  word-break: break-all;
}

tr {
  background-color: #222833;
  transition: 0.2s;
}

tr:hover {
  background-color: #1c2430;
}

.last-column {
  user-select: none;
  text-align: center;
}

.last-column span {
  margin-left: 5px;
}

tr td div {
  cursor: pointer;
  display: inline-block;
  font-size: 13px;
}

tr td div:hover {
  color: rgba(255, 255, 255, 0.6);
}

.first-column input[type=checkbox] {
  width: 12px;
  height: 12px;
  font-size: 12px;
  cursor: pointer;

}

.isEmpty {
  position: relative;
  height: 50px;
  width: 100%;
  border: rgba(255, 255, 255, 0.05) solid 1px;
  border-top: none;
}

/*整个滚动条*/
::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}

/*滑块*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  /* -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); */
  background: rgba(0, 0, 0, 0.11);
}

/*滑块的轨道*/
::-webkit-scrollbar-track {
  /* -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); */
  border-radius: 0;
  background: rgba(0, 0, 0, 0);
}</style>
